import type { Metadata } from 'next';
import Link from 'next/link';
import { AsnBgpChart } from '@/components/detail/AsnBgpChart';
import { ComponentGrid } from '@/components/detail/ComponentGrid';
import { ScopeHeader } from '@/components/detail/ScopeHeader';
import { ScopePressureChart } from '@/components/detail/ScopeCharts';
import { TargetsTable } from '@/components/detail/Tables';
import { IncidentsSection } from '@/components/incidents/IncidentsSection';
import { Section, Stat } from '@/components/ui/primitives';
import { apiGet, apiTry } from '@/lib/api';
import { fmt, fmtDelta, fmtInt, fmtPct, fmtRatio } from '@/lib/format';
import type { AsnDetail } from '@/lib/types';

export const dynamic = 'force-dynamic';

type Params = Promise<{ asn: string }>;

export async function generateMetadata({ params }: { params: Params }): Promise<Metadata> {
  const { asn } = await params;
  const a = await apiTry<AsnDetail>(`/api/v1/pressure/asn/${encodeURIComponent(asn)}`);
  if (!a) return { title: `AS${asn}` };
  return { title: `AS${a.asn} ${a.name} — pressure ${fmt(a.pressure)} (${a.level_label})`, description: `Independent observation of AS${a.asn} (${a.name}): pressure ${fmt(a.pressure)}, BGP churn ${fmtRatio(a.bgp.churn_ratio)}, path stability ${fmtPct(a.bgp.path_stability)}.`, alternates: { canonical: `/asn/${a.asn}` } };
}

export default async function AsnPage({ params }: { params: Params }) {
  const { asn } = await params;
  if (!/^\d+$/.test(asn)) {
    const { notFound } = await import('next/navigation');
    notFound();
  }
  const a = await apiGet<AsnDetail>(`/api/v1/pressure/asn/${encodeURIComponent(asn)}`);
  return (
    <div className="pb-8">
      <ScopeHeader
        kicker={`Autonomous system · ${a.country} · importance ${a.importance}/5`}
        title={`AS${a.asn} ${a.name}`}
        subtitle={<>Observed from {a.regions_observed.length} probe regions · {fmtInt(a.targets.length)} targets announced from this network</>}
        pressure={a.pressure}
        level={a.level}
        delta1h={a.delta_1h}
        trend={a.trend}
        confidence={a.confidence}
        ts={a.ts}
        meta={
          <>
            <span>
              regions{' '}
              {a.regions_observed.map((r) => (
                <Link key={r} href={`/internet/${r}`} className="mr-1 text-ink hover:text-accent">
                  {r}
                </Link>
              ))}
            </span>
          </>
        }
      />

      <Section label="Components">
        <ComponentGrid components={a.components} />
      </Section>

      <Section label="BGP" right={<Link href="/bgp" className="hover:text-ink">global BGP dashboard →</Link>}>
        <div className="mb-4 grid grid-cols-3 gap-4 sm:grid-cols-6">
          <Stat label="prefixes 24h" value={fmtInt(a.bgp.prefixes_observed_24h)} />
          <Stat label="announcements 1h" value={fmtInt(a.bgp.announcements_1h)} />
          <Stat label="withdrawals 1h" value={fmtInt(a.bgp.withdrawals_1h)} />
          <Stat label="churn ratio" value={<span style={{ color: a.bgp.churn_ratio >= 2 ? 'var(--p-high)' : undefined }}>{fmtRatio(a.bgp.churn_ratio)}</span>} sub="vs baseline" />
          <Stat label="origin changes 1h" value={<span style={{ color: a.bgp.origin_changes_1h > 0 ? 'var(--p-elevated)' : undefined }}>{fmtInt(a.bgp.origin_changes_1h)}</span>} />
          <Stat label="path stability" value={<span style={{ color: a.bgp.path_stability < 0.9 ? 'var(--p-stressed)' : undefined }}>{fmtPct(a.bgp.path_stability)}</span>} />
        </div>
        <AsnBgpChart series={a.bgp.series_24h} />
      </Section>

      <Section label="24 h pressure">
        <ScopePressureChart series={a.history_24h} height={220} />
      </Section>

      <Section label="Incidents involving this ASN">
        <IncidentsSection incidents={a.incidents} />
      </Section>

      <Section label="Targets" right={<span>{fmtInt(a.targets.length)} targets · Δ1h {fmtDelta(a.delta_1h)}</span>}>
        <TargetsTable targets={a.targets} />
      </Section>
    </div>
  );
}